<template>
  <scroll-view @scrolltolower='handleToLower' class="recommend_view" scroll-y="true" v-if="recommend.length > 0">
    <!-- 推荐 -->
    <view class="recommend_wrap">
      <navigator class="recommend_item" 
			v-for="item in recommend" 
			:key="item.id"
			:url="`/pages/album/album?id=${item.target}`"
			>
        <image :src="item.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 月份 -->
    <view class="months_wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text> {{ monthes.DD }} /</text>
            {{ monthes.MM }} 月
          </view>
          <view class="months_text">{{ monthes.title }}</view>
        </view>
        <view class="months_title_more"> 更多 ></view>
      </view>
      <view class="months_content">
        <view class="months_item" v-for="(item,index) in monthes.items" :key="item.id">
					<goDetail :list="monthes.items" :index="index">
          <image
            :src="item.thumb + item.rule.replace('$<Height>', 360)"
            mode="aspectFill"
          ></image>
					</goDetail>
        </view>
      </view>
    </view>
    <!-- 热门 -->
    <view class="hots_wrap" >
      <view class="hots_title">
        <text> 热门 </text>
      </view>
      <view class="hots_content">
        <view class="hot_item" 
				v-for="(item,index) in hots" :key="item.id"
				>
				<goDetail :list="hots" :index="index">
          <image mode="widthFix" :src="item.thumb"></image>
					</goDetail>
        </view>
      </view>
    </view>
  
	</scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from '@/components/goDetail.vue'
export default {
  data() {
    return {
      recommend: [],
      monthes: {},
      hots: [],
			params: {
        limit: 30,
        order: "hot",
        skip: 0,
      },
			//是否还有下一页
			hasMore: true
    };
  },
	components: {
		goDetail
	},
  mounted() {
		uni.setNavigationBarTitle({
			title: '推荐'
		})
   this.getList()
  },
	methods: {
		//获取数据
		getList() {
			this.request({
			  url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
			  data: this.params
			}).then((result) => {
				//判断还有没有下一页数据
				if(result.res.vertical.length === 0) {
					this.hasMore = false;
					uni.showToast({
						title: '没有更多好图了',
						icon: 'none'
					})
					return;
				}
					//如果第一次进来才渲染以下数据
				if(this.recommend.length === 0) {
					// 推荐模块
					this.recommend = result.res.homepage[1].items;
					//月份模块
					this.monthes = result.res.homepage[2];
					//将时间戳 改从 xx号/月
					this.monthes.MM = moment(this.monthes.stime).format("MM");
					this.monthes.DD = moment(this.monthes.stime).format("DD");
				}
			  // 获取热门,数组拼接
			  this.hots = [...this.hots, ...result.res.vertical]
				
			});
		},
		//滚动条触底
		handleToLower() {
			if(this.hasMore) {
				this.params.skip += this.params.limit
				this.getList()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
	}
};
</script>

<style scoped lang="less">
.recommend_view {
	height: calc( 100vh - 36px )
}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.months_wrap {
  .months_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .months_title_info {
      color: #d52a7e;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .months_info {
        text {
          font-size: 36rpx;
        }
      }
      .months_text {
        margin-left: 30rpx;
        color: #666;
        font-size: 34rpx;
      }
    }
    .months_title_more {
      font-size: 24rpx;
      color: #d52a7e;
    }
  }
  .months_content {
    display: flex;
    flex-wrap: wrap;
    .months_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 20rpx solid #d52a7e;
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.3%;
     border-left: 5rpx solid #fff;
      image {
      }
    }
  }
}

</style>
